<template>
  <div class="dashboard">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1 class="display-4">Dashboard</h1>
          <p class="lead text-muted">welcome
            <router-link v-if="profile == null" to="/profiles">{{user.name}}</router-link>
            <router-link v-else :to="`/profile/${profile.handle}`">{{user.name}}</router-link>
          </p>
          <div v-if=" profile != null">
            <ProfileActive/>
            <Experience @deleteExperience="deleteExperience" :experience="profile.experience"/>
            <Education @deleteEducation="deleteEducation" :education="profile.education"/>

            <div class="mb-5">
              <button class="btn btn-danger" @click="deleteClear">删除当前账户</button>
            </div>
          </div>
          <div v-else>
            <p>没有任何个人信息，请添加您的个人信息</p>
            <router-link to="/createdProfile" class="btn btn-lg btn-info">创建个人信息</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import ProfileActive from "./common/ProfileActive";
import Experience from "./common/Experience";
import Education from "./common/Education.vue";
export default {
  data() {
    return {};
  },
  computed: {
    user() {
      return this.$store.getters.user;
    },
    profile() {
      return this.$store.getters.profile;
    }
  },
  components: { ProfileActive, Experience, Education },
  methods: {
    deleteExperience(id) {
      this.$axios
        .delete(`http://localhost:5000/api/profile/experience/${id}`)
        .then(res => {
          // console.log(res.data);
          this.$store.dispatch("setProfile", res.data);
          // this.profile = res.data;
        })
        .catch(err => {
          console.log(err.response.data);
        });
    },
    deleteEducation(id) {
      this.$axios
        .delete(`http://localhost:5000/api/profile/education/${id}`)
        .then(res => {
          // console.log(res.data);
          this.$store.dispatch("setProfile", res.data);
          // this.profile = res.data;
        })
        .catch(err => {
          console.log(err.response.data);
        });
    },
    getProfileData() {
      this.$axios
        .get("http://localhost:5000/api/profile/")
        .then(res => {
          // console.log(res.data);

          this.$store.dispatch("setProfile", res.data);
        })
        .catch(err => {
          // console.log(err.response.data);
          this.$store.dispatch("setProfile", null);
        });
    },
    deleteClear() {
      if (confirm("确定要删除账户信息吗")) {
        this.$axios
          .delete("http://localhost:5000/api/profile/")
          .then(res => {
            //删除token
            window.localStorage.removeItem("jwt");

            //重置用户状态
            this.$store.dispatch("setIsAuthenticated", false);
            //重置用户信息
            this.$store.dispatch("setUser", {});
            this.$store.dispatch("setProfile", null);
            //跳转页面
            this.$router.push("/login");
          })
          .catch(err => {
            console.log(err.response.data);
          });
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getProfileData();
    });
  }
};
</script>

<style scoped lang="stylus">
</style>
